<template>
  <div class="left_nav">
    <el-menu
      background-color="#e5f1fd"
      text-color="#666"
      active-text-color="#0063c7"
      unique-opened
      :default-active="$route.path"
      class="leftMenu"
      router
    >
      <!-- 人员基础信息维护 -->
      <el-submenu index="1">
        <template slot="title">
          <span>基础信息维护</span>
        </template>
        <el-menu-item
          index="/personnel_management/personnel_management/base_information"
          >人员基础信息</el-menu-item
        >
        <!--        <el-menu-item index="/report_management/report_ready">填报准备</el-menu-item>-->
        <!--        <el-menu-item index="/report_management/query_comparison">查询对照</el-menu-item>-->
      </el-submenu>

      <!-- 表册输出 -->
      <el-submenu index="2">
        <template slot="title">
          <span>表册输出</span>
        </template>
        <el-menu-item index="/list_output/batch_printting"
          >批量打印</el-menu-item
        >
        <el-menu-item index="/list_output/photo_roll">照片名册</el-menu-item>
      </el-submenu>

      <!-- 上报接收 -->
      <!--      <el-submenu index="3">-->
      <!--        <template slot="title">-->
      <!--          <span>上报接收</span>-->
      <!--        </template>-->
      <!--        &lt;!&ndash; <el-menu-item index="/list_output/batch_printting">数据上报</el-menu-item> &ndash;&gt;-->
      <!--        <el-menu-item index="/report_receive/data_reception">数据接收</el-menu-item>-->
      <!--      </el-submenu>-->

      <!-- 花名册 -->
      <el-submenu index="4">
        <template slot="title">
          <span>花名册</span>
        </template>
        <el-menu-item index="/roster/common_roster">常用花名册</el-menu-item>
        <!--        <el-menu-item index="/roster/custom_roster">自定义花名册</el-menu-item>-->
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.left_nav {
  flex: 200px 0 0;
  background-color: #e5f1fd;
  .el-menu {
    border-radius: 10px;
    overflow: hidden;
    flex: 200px 0 0;
    border-right: none;
    .el-submenu {
      /deep/.el-menu {
        .el-menu-item {
          background-color: #f9f9f9 !important;
          &.is-active,
          &.is-active.parent {
            background-color: #ddd !important;
            color: #0063c7 !important;
          }
          &:hover {
            background-color: #ddd !important;
            color: #6ab5f6 !important;
          }
        }
      }
    }
  }
}
</style>
